
<template>
  <el-row>
    <el-col class="mb-4" :span="24">


      <el-button type="primary" @click="doTianditu()">天地图</el-button>
      <el-button type="primary" @click="doGaode()">高德</el-button>
      <el-button type="primary" @click="doArcgis()">ArcGis</el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24" style="height: 80vh">
      <CesiumMap ref="cesiumMap"></CesiumMap>
    </el-col>
  </el-row>
</template>
  

<script>
import CesiumMap from "../cesiumMap/index.vue";
import * as Cesium from "cesium";
import { ref, onMounted } from "vue";
const cesiumMap = ref(null);
let viewer = ref(null);
export default {
  components: { CesiumMap },
  methods: {


    doTianditu: function () {

      viewer.imageryLayers.removeAll(); //
      let TOKEN_TIANDITU = '39c6ffb6b4ceb22a0dfad5975f58a495';

      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=39c6ffb6b4ceb22a0dfad5975f58a495",
          layer: "tdtBasicLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          maximumLevel: 18
        }));

      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + TOKEN_TIANDITU,
          layer: "tdtAnnoLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: true,
        }));
    },
    doGaode: function () {
      viewer.imageryLayers.removeAll(); //

      viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
        maximumLevel: 18,//最大缩放级别
        url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
        style: "default",
        format: "image/png",
        tileMatrixSetID: "GoogleMapsCompatible"
      }));

      viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          maximumLevel: 18,//最大缩放级别
          url: 'https://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11',
          style: "default",
          format: "image/png",
          tileMatrixSetID: "GoogleMapsCompatible"
        })
      );


    },
    doArcgis: function () {
      viewer.imageryLayers.removeAll(); //
      viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        baseLayerPicker: false
      }));
    }
  },
  setup() {

    return {
      cesiumMap
    };
  },
  mounted() {
    viewer = cesiumMap.value.viewer;
  }


};
</script>

<style scoped></style>
